// 导入变量和混合器
@import '@styles/variables.scss';
@import '@styles/mixins.scss';

// 对话列表容器
.conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;

    @include scrollbar;
}

// 对话项
.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
        background: $background-secondary;

        .conversation-actions {
            opacity: 1;
        }
    }

    // 对话图标
    .conversation-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba($primary-color, 0.1);
        border-radius: 8px;
        color: $primary-color;
        flex-shrink: 0;

        i {
            font-size: 20px;
        }
    }

    // 对话信息
    .conversation-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    // 对话标题
    .conversation-title {
        font-size: 14px;
        font-weight: 500;
        color: $text-primary;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    // 对话元信息
    .conversation-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: $text-secondary;

        .time {
            white-space: nowrap;
        }

        .message-count {
            white-space: nowrap;
        }
    }

    // 操作按钮
    .conversation-actions {
        opacity: 0;
        transition: opacity 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    // 操作按钮
    .action-button {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: $text-secondary;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s ease;

        &:hover {
            background: rgba($text-secondary, 0.1);
            color: $text-primary;
        }

        i {
            font-size: 16px;
        }
    }
}

// 空状态
.empty-state {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: $text-secondary;
    padding: 32px;

    i {
        font-size: 48px;
        opacity: 0.5;
    }

    p {
        font-size: 14px;
        margin: 0;
    }
}